<template>
 <Split v-model="split" min='0px'>
            <div slot="left" class="split-atrr"  ref="leftSplit">
               <Scroll ref="ivScroll" class="ivScrollb" :height="scrollHeight"  > 
                 <ul class="ui-design-content-ul"  ref="contentScroll">
                  <li class="designUili designUili1">
                    <Button class="titleOnOff"  size="large" type="text"  ghost @click="add = true">
                      <Icon type="ios-add" size="28"/><span class="titleTip">新建</span>
                      </Button>
                  </li> 
                  <li class="designUili "  v-for="(item,index) in pagesList">
                    <div :class="{designColorLi:designColorLi==index}" class="designUiContent designColorLi1"> 
                      <span>{{item}}</span>
                      <span class="tips">
                          <span v-if="isShow&&(indexShow1!=index)" class="tips1" @click="switchClick({data:item,num:index},1)"><Button size="small">使用</Button></span>
                          <span v-if="isShow&&(indexShow1==index)"  class="tips2"  @click="switchClick({data:item,num:index},2)">使用中</span>
                      </span>
                    </div>
                  </li>
                 </ul>   
               </Scroll>
            </div>
            <div slot="right" class="split-atrr">
                 <div class="wrapper">
                        <div class="switchTitle">
                          <div class="switchTitle1">
                          <Button  class="switchButton" :class="{switchButton2:switchButton2==index}" v-for="(item,index) in  buttonList"  @click="buttonClick(item.type,index)">
                         <Icon :type="item.icon" size="16" class="design-icon"/>
                         {{item.title}}
                         </Button>   
                          </div>
                       
                        <ui-copy-modal v-model="copy" @changeVal="changeVal"></ui-copy-modal> 
                        <ui-edit-modal v-model="edit" @changeVal="changeVal1"></ui-edit-modal> 
                        </div>
                        <div class="mainContent mainContent1">
                         <div class="design-empy">
                          <div class="empy-img"></div>
                          <div style="textAlign:center;color:#C0C0C0">
                            暂无内容
                          </div>
                        </div>  

                          
                        <!-- <ui-design-board></ui-design-board> -->
                        </div>
                    </div>
            </div>
          
        </Split>
        
</template>

<script>
import uiDesignBoard from "./ui-design-board.vue"
import uiCopyModal from "./ui-design-copy.vue"
import uiEditModal  from "./ui-design-edit.vue"
export default {

name:'ui-design-content',
components:{uiDesignBoard,uiCopyModal,uiEditModal},
  props:{
      isShow:{
        type:Boolean,
        default:true
      },
      addData:{
        type:Boolean,
        default:false
      },
      split:{
          type:String|Number,
          default:'240px'
      },
      indexShow:{
          type:Number|String,
          default:0
      },
      pagesList:{
            type:Array,
          default:function (){
              return [
                  "界面1",
                    "界面2",
                     "界面3",
                    "界面4", "界面5",
                    "界面6",
                     "界面1",
                    "界面2",
                     "界面3",
                    "界面4", "界面5",
                    "界面6", "界面1",
                    "界面2",
                     "界面3",
                    "界面4", "界面5",
                    "界面6", "界面1",
                    "界面2",
                     "界面3",
                    "界面4", "界面5",
                    "界面6" ,"界面1",
                    "界面2",
                     "界面3",
                    "界面4", "界面5",
                    "界面6"
              ]
          }
      }
  },
  data(){
    return {
      switchButton2:null,
      add:false,
      index:0,
      designColorLi:0,
      scrollHeight:'100%',
      scrollMain:true,
      indexShow1:null,
      copy:false,
      edit:false,
        buttonList:[
             {
                  title:'编辑',
                  type:'edit',
                  icon:'ios-brush-outline'
            },
            {
                  title:'复制',
                  type:'copy',
                 icon:'ios-copy-outline'
            },
            {
                  title:'设计',
                  type:'design',
                  icon:'ios-color-palette-outline'
            },    {
                  title:'预览',
                  type:'preview',
                  icon:'ios-eye-outline'
            },        {
                  title:'删除',
                  type:'delete',
                  icon:'ios-trash-outline'
            }
        ]
    }
  },
  watch:{
    indexShow(val){
      this.indexShow1=val
    },
    addData(val){
      this.add=val;
    },
    add(val){
   
      this.$emit("addClick",val);
    },
  },
  computed:{},
  methods:{
      switchClick(val,item){       
        this.designColorLi=val.num
        this.$emit("designChange",val)

      },
      buttonClick(type,index){
            if(type=='copy'){
                    this.copy=true   
            }
            else if(type=='edit'){
                    this.edit=true 
            }
            else if(type=='preview'){
                   this.$router.push({
                 path:"/design-preview"
               })
            }
            else if(type=='design'){
               this.$router.push({
                 path:"/design-board"
               })
            }
            else if(type=='delete'){
              alert("删除")
            }
            this.switchButton2=index
      },
      changeVal(val){
          this.copy=val.modal
          if(val.button){//确定

          }
     },
      changeVal1(val){
          this.edit=val.modal
          if(val.button){//确定

          }
     },
  scrollHeightChange(val){//滚动条 出现 收起
        if(val==1){
        if(this.$refs.leftSplit.clientHeight>this.$refs.contentScroll.clientHeight) return  //如果没有超出  滚动条不显示
         this.scrollMain=false
        }else if(val==2){
                this.scrollMain=true
        }
    }
  },
  created(){},
  mounted(){
    this.indexShow1=this.indexShow
    this.scrollHeight=this.$refs.leftSplit.clientHeight

  }
}
</script>
<style lang="less" scoped>
.wrapper{
  width:100%;
  height:100%;
  background: white; 
  padding-top: 16px;
  }
.switchTitle{
  height: 50px;
  padding: 0 16px;
}
.switchTitle1{
    padding-top:2px;
}
.switchButton{
    border: none;
    outline: none;
    box-shadow: none;
}
// .switchButton:hover{
//   background:#2d8cf0  ;
//   color: #ffffff;
// }
.switchButton2{
    background:#2d8cf0  ;
  color: #ffffff;
}
.mainContent{
  border: 1px solid  rgba(220, 222, 226, 1);
  width:100%;
  height:calc(~"100% - 50px");
}
.mainContent1{
   border:none;
}
.split-atrr{
  width: 100%;
  height: 100%;
    overflow: hidden;
}
.designUili .tips{
    float:right;
    cursor: pointer;
}
// scroll 变化切换 class
&/deep/ .ivu-scroll-container{
  overflow-x: hidden;
}
&/deep/ .scrollMain .ivu-scroll-container{
  overflow-y: hidden;
}
.designUili{
    list-style: none;
    // border-bottom: 1px solid  rgba(220, 222, 226, 1);
    padding:  0 8px 0 16px;
    position: relative;
}
.designUili1{
padding: 18px 8px 18px 16px;
}
&/deep/ .designUili1 .ivu-btn{
  padding:0 15px 0 15px  !important;
}
&/deep/ .ivu-scroll-loader{
         height: 0;
}
.ivScrollb ::-webkit-scrollbar {
display: none;
}
.tips1{
   display: inline-block;
   position: absolute;
   right: 12px;
   top: 3px;
}
.tips2{
  color: #F59A23;
  position: absolute;
  right: 14px;
}
.titleOnOff{
  width: 100%;
  height: 100%;
  transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
    border: 1px dashed #2d8cf0  ;
  color: #2d8cf0  ;
    .titleTip{
    size: 28px;

  }
}

.designColorLi{
    background: #2d8cf0   !important;
    color: #ffffff !important;

}
.designColorLi1{
          transition: color .2s linear,background-color .2s linear;
    }
.designColorLi1:hover{
background: #e9f4ff;
color: #515a6e;
    }
.designUiContent{
border-radius: 4px;
padding:6px;
position: relative;
}
.ui-design-content-ul{
padding-bottom: 12px;
}
.design-icon{
  position:relative;
  top:-2px
}
.design-empy{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-flow: column;
}
.empy-img{
  width: 204px;
  height: 179px;
  background: url("../../../assets/design/Group 49.png") no-repeat;
  background-position: center center;

}

</style>